<style>
table {
    width: 100%;
    border:0.1px solid #cdd1d4;
    text-align: center;
    border-collapse: collapse;
}
table th,table tr th, table tr td { 
    border: 0.1px solid #cdd1d4;
    width: 459.333px;
    float: left;
}
table tr {
    height: 30px;
}
table th {
    height: 35px;
}
table td {
    height: 30px;
}
</style>
<template>
    <table>
        <thead>
            <th>菜单名称</th>
            <th>菜单图标</th>
            <th>上级菜单</th>
        </thead>
        <tbody>
            <div v-for="menu in menuList" :key="menu.id">
                <!-- 父级菜单 -->
                <tr>
                    <td><Icon type="chevron-right"></Icon>{{menu.name}}</td>
                    <td>{{menu.icon}}</td>
                    <td>{{menu.pname}}</td>
                </tr>
                <div v-if="menu.subMenu != ''" v-for="sub in menu.subMenu" :key="sub.id">
                    <!-- 二级菜单 -->
                    <tr>
                        <td><Icon v-if="sub.subMenu != ''" type="chevron-right"></Icon>{{sub.name}}</td>
                        <td>{{sub.icon}}</td>
                        <td>{{sub.pname}}</td>
                    </tr>
                    <!-- 三级菜单 -->
                    <tr v-if="sub.subMenu != ''" v-for=" subb in sub.subMenu" :key="subb.id">
                        <td>{{subb.name}}</td>
                        <td>{{subb.icon}}</td>
                        <td>{{subb.pname}}</td>
                    </tr>
                </div>              
            </div>  
        </tbody>
    </table>
</template>
<script>
import menus from './data.js';
export default {
    name:'tree-table',
    data () {
        return {
            menuList: menus.menusList
        }
    }
}
</script>

